/*获取 li */
let ali = document.querySelectorAll("#box ul li");



for(let i=ali.length-1;i>=0;i--){
    ali[i].addEventListener('mouseenter',function(e){
        move.call(this, e, true);
    });
    
    ali[i].addEventListener('mouseleave',function(e){
        move.call(this, e, false);
    })
}


/*事件函数 move*/
function move(ev, bool) {
  //参数 ev 鼠标对象 bool 区分移入移除
  /*获取当前对象 顶部相对于当前文档的顶部的位置(top)/底部的相对位置(bottom)/左边相对于文档左侧的位置(left)/右边相对位置(right) */
  let top = this.offsetTop,
    bottom = top + this.offsetHeight,
    left = this.offsetLeft,
    right = left + this.offsetWidth;

  /*获取当前鼠标的坐标位置 pageX:鼠标相对于整个页面的x坐标 pageY:鼠标相对于整个页面的Y坐标*/
  let x = ev.clientX,
    y = ev.clientY;
  /*取得鼠标相对于盒子各个边的位置并取绝对值*/
  let sT = Math.abs(y - top),
    sB = Math.abs(y - bottom),
    sL = Math.abs(x - left),
    sR = Math.abs(x - right);
  let min = Math.min(sT, sB, sL, sR); //找出其中最小的值,说明鼠标是从最小值的方位进入的
  switch (min) {
    //如果最小值是sT ,说明鼠标是从盒子顶部进入的
    case sT:
        moveDirection.call(this,0,-220,bool)
        break;
    case sB:
        moveDirection.call(this,0,220,bool)
        break;
    case sL:
        moveDirection.call(this,-164,0,bool)
        break;
    case sR:
        moveDirection.call(this,164,0,bool)
        break;
    default:
        return;
  }

  function moveDirection(left, top,bool){
      const text =  this.querySelector('.text');
      if(bool){
          text.style.left = left + 'px';
          text.style.top = top + 'px';
          animation(text,{
              left : 0,
              top  : 0
          },0.2);
      }else{
        animation(text,{
            left : left,
            top : top 
        },0.2);
       
      }
      
  }
}
